<template>
  <div>
    <checked-title title="门头审核情况" />
    <div id="mentoubaoshen-shenhe" style="height:300px;"></div>
  </div>
</template>

<script>
let chartMTSH = null
import { MenTouBaoShenDB } from '@/api'

export default {
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (chartMTSH == null) {
      echarts.init(document.getElementById('mentoubaoshen-shenhe')).dispose()
    }
  },
  methods: {
    initChart() {
      MenTouBaoShenDB.getShenHe().then((res) => {
        let name = [],
          succArr = [],
          errArr = []
        for (let index = 0; index < res.data.length; index++) {
          const datas = res.data[index]
          name.push(datas.date)
          succArr.push(datas.succNum)
          errArr.push(datas.errNum)
        }

        chartMTSH = echarts.init(
          document.getElementById('mentoubaoshen-shenhe')
        )

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter:params =>{
            let str =  ` 
                ${params[0].name}<br/>
                ${params[0].seriesName}:${params[0].value}个<br/>
                ${params[1].seriesName}:${params[1].value}个<br/>
            `
            return str
            } 
          },
          legend: {
            data: ['审核通过', '审核驳回'],
            icon: 'rect',
            top: 15,
            right: 0,
            itemWidth: 12,
            itemHeight: 4,
            textStyle: {
              fontSize: '12px',
              color: '#ffffff',
              padding: [3, 0, 0, 0],
            },
          },
          grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              splitArea: {
                color: '#f00',
                lineStyle: {
                  color: '#f00',
                },
              },
              axisLabel: {
                color: '#fff',
                rotate: 45,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              boundaryGap: false,
              data: name,
            },
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              splitNumber: 4,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)',
                },
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                  color: '#d1e6eb',
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [{
              name: '审核驳回',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: false,
              symbol: 'none',
              lineStyle: {
                show: true,
                normal: {
                  color: 'rgba(255, 63, 176, 1)',
                },
              },
           
              label: {
                show: false,
              },
              itemStyle: {
                show: false,
              },

              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(255, 63, 176, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(255, 63, 176, .2)',
                      },
                    ],
                    false
                  ),
                },
              },
              data: errArr,
            },
            {
              name: '审核通过',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: false,
              symbol: 'none',
              lineStyle: {
                show: true,
                normal: {
                  color: 'rgba(5, 255, 246, 1)',
                },
              },
              label: {
                show: false,
              },
              itemStyle: {
                show: false,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(5, 247, 239, 0.43)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(5, 255, 246, 0.06)',
                      },
                    ],
                    false
                  ),
                },
              },
              data: succArr,
            },
            
          ],
        }

        chartMTSH.setOption(option)
      })
    },
  },
}
</script>
<style>
#mentoubaoshen-shenhe{
  cursor: pointer;
}
</style>
